import type { ZhiHuQuestionElements } from '../../../../../../../../types/constants/personalization/zhi_hu_question'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { ICON_IDS } from '../../../../../../../../lib/icons/types/constants'
import { ToolKit } from '../../../../../../../../lib/utils/toolkit'
import {
  logger,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { OFFICIAL_THEME_VAR } from '../../../../../../../../types/constants/offical'
import { StylesService } from '../../../../../../../../types/constants/styles'
import { ZhiHuQuestionCommonPage } from './common'

export class ZhiHuQuestionAnswerPage {
  name: string = 'ZhiHuQuestionAnswerPage'
  elements: ZhiHuQuestionElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.ZHI_HU_QUESTION]
  private static instance: ZhiHuQuestionAnswerPage
  private readonly commonPage: ZhiHuQuestionCommonPage = ZhiHuQuestionCommonPage.getInstance()
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly stylesService: StylesService = StylesService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): ZhiHuQuestionAnswerPage {
    if (!ZhiHuQuestionAnswerPage.instance) {
      ZhiHuQuestionAnswerPage.instance = new ZhiHuQuestionAnswerPage()
    }
    return ZhiHuQuestionAnswerPage.instance
  }

  init(): void {
    this.commonPage.setupCommentButtonClick()

    ToolKit.async.onWindowLoad(() => {
      this.handleClickViewAllButton()
    })
  }

  /**
   * 处理点击'查看全部回答'按钮事件
   */
  handleClickViewAllButton(): void {
    const selector: string = '.Question-mainColumn .ViewAll a.ViewAll-QuestionMainAction'
    const $elements = $(selector)

    if (!$elements || $elements.length === 0) {
      logger.warn(`[${this.name}] 未找到 '查看全部回答' 按钮元素`)
      return
    }

    $elements.on('click', (e) => {
      e.preventDefault()

      const url = $(e.currentTarget).attr('href')

      if (!url)
        return

      ToolKit.browser.url.openTab(url)
    })

    logger.attention(`[${this.name}] 已绑定 '查看全部回答' 按钮点击事件`)
  }

  /**
   * 评论样式
   */
  commentStyles(): string {
    return `
> div {
  > div {
    /* 评论输入框 */
    &:first-child  > div > div {
      border-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
    }
    
    /* 未登录时隐藏评论输入框 */
    ${!this.commonPage.isLoggedIn
      ? `
    &[class]:has(.public-DraftEditor-content) {
      display: none !important;
    }`
      : ``}
    
    &:has(.CommentContent) {
      border: none !important;
      
      > div {
        &::before {
          border-bottom: none !important;
          border-top: none !important;
        }
        
        &:has(svg[class*="ArrowRight"]) {
          /* 点击查看全部评论 */
          > div {
            color: var(${this.themeVarService.tieBar.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
              
              + svg {
                fill: var(${this.themeVarService.link.default.text}) !important;
              }
            }
          }
        }
      }
      
      /* 评论数 */
      > div > div:first-child > div {
        color: var(${this.themeVarService.tieBar.default.text}) !important;
      }
      
      /* 评论列表 */
      > div > div > div[data-id]:has(.CommentContent) {
        background: var(${this.themeVarService.tieBar.comment.background}) !important;
        border-radius: ${this.themeVarService.tieBar.default.borderRadius} !important;
        margin-bottom: ${this.themeVarService.tieBar.default.gap} !important;
        padding: ${this.themeVarService.tieBar.default.padding} !important;
      }
    }
  }

  /* 评论内容 */
  div:has(> .CommentContent) {
    /* 评论者 */
    div {
      &:not(.CommentContent) {
        a {
          color: var(${this.themeVarService.tieBar.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.text}) !important;
          }
        }
      }
    }
    
    .CommentContent {
      color: var(${this.themeVarService.tieBar.default.text}) !important;
    }
    
    button:hover {
      color: var(${this.themeVarService.link.default.text}) !important;
    }
  }
}
`
  }

  getMainStyles(): string {
    return `
.QuestionPage {
  .QuestionHeader {
    margin-top: var(${OFFICIAL_THEME_VAR[SUPPORTED_PLATFORMS.ZHI_HU_QUESTION].header}) !important;
  }

  #AnswerFormPortalContainer {
    margin-top: 0 !important;
  }
  
  .Question-main {
    margin: 0 auto !important;
    min-height: unset !important;
    background-color: var(${this.themeVarService.tieBar.default.background}) !important;
    padding: 0 ${this.commonPage.padding} !important;
    
    .ListShortcut {
      .Question-mainColumn {
        .Card {
          line-height: 1.8 !important;
          background-color: transparent !important;
          box-shadow: unset !important;
          color: var(${this.themeVarService.tieBar.default.text}) !important;

          /* 查看全部、回答卡片、更多内容 */
          &.ViewAll, &.AnswerCard, &.MoreAnswers {
            margin-bottom: 0 !important;
          }
          
          /* 查看全部 */
          &.ViewAll {
            box-shadow: unset !important;
            display: none !important;
            
            /* 只保留第一个查看全部回答按钮 */
            &:first-of-type {
              display: block !important;
            }
            
            .ViewAll-QuestionMainAction {
              color: var(${this.themeVarService.tieBar.default.text}) !important;
              
              &:hover {
                color: var(${this.themeVarService.link.default.text}) !important;
              }
              
              &::before {
                ${this.stylesService.inlinePseudo.icon({ backgroundImageId: ICON_IDS.action.viewAll })}
              }
            }
          }
          
          /* 回答卡片、更多内容 */
          &.AnswerCard .QuestionAnswer-content, &.MoreAnswers .List {
            .ContentItem-meta {
              .AuthorInfo-content {
                /* 回答作者 */
                .UserLink-link {
                  color: var(${this.themeVarService.tieBar.default.text}) !important;
                  
                  &:hover {
                    color: var(${this.themeVarService.link.default.text}) !important;
                  }
                }
              }
            }

            .RichContent {
              #content {
                p {
                  color: var(${this.themeVarService.tieBar.default.text}) !important;
                  
                  a {
                    color: var(${this.themeVarService.link.default.text}) !important;
                    
                    &:hover {
                      color: var(${this.themeVarService.link.default.textHover}) !important;
                    }
                  }
                }
              }
              
              /* 展开阅读全文 */
              button.ContentItem-expandButton {
                &:hover {
                  color: var(${this.themeVarService.link.default.text}) !important;
                }
              }
              
              /* 操作按钮 */
              .ContentItem-actions {
                button:hover {
                  color: var(${this.themeVarService.link.default.text}) !important;
                }
                
                &.is-fixed {
                  background-color: var(${this.themeVarService.default.background.fixed}) !important;
                  width: ${this.commonPage.pageWidth} !important;
                  left: 50% !important;
                  transform: translateX(-50%) !important;
                }
              }
            }
            
            /* 下拉评论 */
            .Comments-container {      
              ${this.commentStyles()}
            }
          }
          
          /* 回答卡片 */
          &.AnswerCard .QuestionAnswer-content {
            background: var(${this.themeVarService.tieBar.answer.background}) !important;
            border-radius: ${this.themeVarService.tieBar.default.borderRadius} !important;
            
            #content {
              p span a {
                color: var(${this.themeVarService.link.default.text}) !important;
                
                &:hover {
                  color: var(${this.themeVarService.link.default.textHover}) !important;
                }
              }
            }
          }
          
          /* 更多内容 */
          &.MoreAnswers {
            box-shadow: unset !important;
            
            .List-header {
              &:after {
                border-bottom-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
                left: unset !important;
                right: unset !important;
              }
              
              .List-headerText {
                background: transparent !important;
                color: var(${this.themeVarService.tieBar.default.text}) !important;
                
                &::before {
                  ${this.stylesService.inlinePseudo.icon({ backgroundImageId: ICON_IDS.interface.pageMore })}
                }
              }
            }
            
            .List-item {
              background: var(${this.themeVarService.tieBar.answer.background}) !important;
              border-radius: ${this.themeVarService.tieBar.default.borderRadius} !important;
              margin-bottom: ${this.themeVarService.tieBar.default.gap} !important;
              
              /* 去掉回答卡片之间的边框 */
              & + .List-item:after {
                border-bottom: none !important;
              }
              
              
              &:last-child {
                margin-bottom: 0 !important;
              }
            }
          }
          
          &.AnswersNavWrapper .List-header .List-headerOptions button.InputLike {
            background: transparent !important;
            color: var(${this.themeVarService.tieBar.default.text}) !important;
          }
        }
      }
    }
    
    .Question-sideColumn {
      margin-left: ${this.commonPage.padding} !important;
      background-color: var(${this.themeVarService.tieBar.default.background}) !important;
      height: fit-content !important;
    }
  }
}
`
  }
}
